<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>出入库管理</el-breadcrumb-item>
      <el-breadcrumb-item>入库管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div style="border: 2px, lightskyblue, solid; margin-top: 50px; padding: 30px">
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="入库类型：">
        <el-select v-model="page.Inwarehousetype" placeholder="请选择入库类型" style="width: 240px">
          <el-option label="请选择入库类型" :value="0" />
          <el-option label="采购入库" :value="1" />
          <el-option label="调拨入库" :value="2" />
          <el-option label="受赠入库" :value="3" />
          <el-option label="捐赠入库" :value="4" />
          <el-option label="其他入库" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属仓库：">
        <el-select v-model="page.WarehouseId" placeholder="请选择所属仓库" style="width: 240px"
          @change="LianDongSelect(page.WarehouseId)">
          <el-option v-for="item in wareHouseOptions" :label="item.warename" :value="item.warehouseNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属库位：">
        <el-select v-model="page.LocationNoId" placeholder="请选择所属库位" style="width: 240px">
          <el-option v-for="item in locationOptions" :label="item.locationName" :value="item.locationNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="page.Status" placeholder="请选择状态" style="width: 240px">
          <el-option label="请选择状态" :value="0" />
          <el-option label="待入库" :value="1" />
          <el-option label="已入库" :value="2" />
          <el-option label="取消入库" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作日期区间：">
        <el-date-picker v-model="page.Inwarehousedate1" type="date" placeholder="开始日期" clearable
          value-format="YYYY-MM-DD" />——
        <el-date-picker v-model="page.Inwarehousedate2" type="date" placeholder="结束日期" clearable
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="GetInWareHouseList">查询</el-button>
        <el-button type="primary" @click="ReSet">重置</el-button>
        <el-button type="success" @click="CreatedialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div style="margin-top: 50px">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column fixed type="index" label="序号" width="60" />
      <el-table-column fixed prop="appid" label="唯一编码" width="180" />
      <el-table-column prop="inwarehousetype" label="入库类型" width="120">
        <template #default="asd">
          <el-tag v-if="asd.row.inwarehousetype == 1">采购入库</el-tag>
          <el-tag v-if="asd.row.inwarehousetype == 2">调拨入库</el-tag>
          <el-tag v-if="asd.row.inwarehousetype == 3">受赠入库</el-tag>
          <el-tag v-if="asd.row.inwarehousetype == 4">捐赠入库</el-tag>
          <el-tag v-if="asd.row.inwarehousetype == 5">其他入库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="warehousename" label="仓库名称" width="120" />
      <el-table-column prop="locationname" label="库位名称" width="120" />
      <el-table-column prop="inwarehousedate" label="操作日期" width="180">
        <template #default="asd">
          {{ moment(asd.row.inwarehousedate).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="asd">
          <el-tag v-if="asd.row.status == 1" type="primary">待入库</el-tag>
          <el-tag v-if="asd.row.status == 2" type="success">已入库</el-tag>
          <el-tag v-if="asd.row.status == 3" type="danger">取消入库</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="relationordernum" label="关联商品单号" width="180" />
      <el-table-column prop="suppilier" label="供应商" width="180" />
      <el-table-column prop="contacts" label="联系人" width="120" />
      <el-table-column prop="contactinfor" label="联系方式" width="120" />
      <el-table-column prop="operator" label="操作人" width="120" />
      <el-table-column prop="audituser" label="审核人" width="120" />
      <el-table-column prop="auditdate" label="审核时间" width="180">
        <template #default="asd">
          {{ moment(asd.row.auditdate).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="备注" width="120" />
      <el-table-column fixed="right" label="操作" min-width="180">
        <template #default="asd">
          <el-button link type="success" size="small" :disabled="asd.row.status == 2"
            @click="toAudit(asd.row.appid)">审核</el-button>
          <el-button disabled link type="danger" size="small">删除</el-button>
          <el-button disabled link type="primary" size="small">编辑</el-button>
          <el-button disabled link type="warning" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <table>
      <tr>
        <th>
          <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]" layout="slot, sizes" :total="page.totalData">
            当前第{{ page.pageIndex }}页/共{{ page.totalPage }}页/共{{
              page.totalData
            }}条
          </el-pagination>
        </th>
        <th>
          <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]" layout="slot, prev, pager, next" :total="page.totalData">
            <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1" type="primary">首页</el-button>
          </el-pagination>
        </th>
        <th>
          <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]" layout="slot,jumper" :total="page.totalData">
            <el-button :disabled="page.pageIndex == page.totalPage" @click="page.pageIndex = page.totalPage"
              type="primary">尾页</el-button>
          </el-pagination>
        </th>
      </tr>
    </table>
  </div>

  <div>
    <el-dialog v-model="AuditdialogFormVisible" title="审核入库信息" width="500">
      <el-form-item label="意见">
        <el-radio-group v-model="AuditPostForm.radioInfo">
          <el-radio :value="1" size="large" border>通过</el-radio>
          <el-radio :value="2" size="large" border>驳回</el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="AuditRuleForm.desc" style="width: 240px" :rows="2" type="textarea" placeholder="请输入备注" />
      </el-form-item>

      <el-button type="primary" @click="ContinueAudit" :disabled="isSubmitting">{{ isSubmitting ? '处理中...' :
        '确定' }}</el-button>
      <el-button type="danger" @click="CancleAudit">取消</el-button>
    </el-dialog>

    <el-dialog v-model="CreatedialogFormVisible" title="新增入库信息" width="1200">
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="CreateruleForm" :rules="rules" label-width="auto">
        <el-form-item label="入库类型" prop="inwarehousetype">
          <el-select v-model="CreateruleForm.inwarehousetype" placeholder="请选择入库类型" style="width: 240px">
            <el-option label="请选择入库类型" :value="0" />
            <el-option label="采购入库" :value="1" />
            <el-option label="调拨入库" :value="2" />
            <el-option label="受赠入库" :value="3" />
            <el-option label="捐赠入库" :value="4" />
            <el-option label="其他入库" :value="5" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属仓库" prop="warehouseId">
          <el-select v-model="CreateruleForm.warehouseId" placeholder="请选择所属仓库" style="width: 240px"
            @change="LianDongSelect(CreateruleForm.warehouseId)">
            <el-option v-for="item in wareHouseOptions" :label="item.warename" :value="item.warehouseNo" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属库位" prop="locationNo">
          <el-select v-model="CreateruleForm.locationNo" placeholder="请选择所属库位" style="width: 240px">
            <el-option v-for="item in locationOptions" :label="item.locationName" :value="item.locationNo" />
          </el-select>
        </el-form-item>

        <el-form-item label="关联进货单" prop="relationordernum">
          <el-input disabled style="width: 375px; margin-right: 50px"
            v-model="CreateruleForm.relationordernum" /><el-button
            @click="CheckRelationdialogFormVisible = true"><el-icon>
              <MoreFilled />
            </el-icon></el-button>
        </el-form-item>

        <el-form-item label="供应商" prop="suppilier">
          <el-input v-model="CreateruleForm.suppilier" />
        </el-form-item>

        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="CreateruleForm.contacts" />
        </el-form-item>

        <el-form-item label="联系方式" prop="contactinfor">
          <el-input v-model="CreateruleForm.contactinfor" maxlength="11" />
        </el-form-item>

        <el-form-item label="经办人" prop="operator">
          <el-input v-model="CreateruleForm.operator" />
        </el-form-item>

        <el-form-item label="备注" prop="desc">
          <el-input v-model="CreateruleForm.desc" type="textarea" maxlength="50" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="CheckRelationdialogFormVisible" title="选择关联进货单" width="900">
      <el-table :data="RelationTableData" style="width: 100%" ref="goodsTableRef">
        <el-table-column label="选择" width="55">
          <template #default="asd">
            <el-radio-group v-model="CreateruleForm.relationordernum">
              <el-radio :value="asd.row.goodscoding" size="large" />
            </el-radio-group>
          </template>
        </el-table-column>



        <el-table-column prop="goodscoding" label="货品编码" width="200" />
        <el-table-column label="货品信息">
          <el-table-column prop="goodsname" label="货品名称" width="150" />
          <el-table-column prop="goodsstatus" label="货品状态" width="120">
            <template v-slot="scop">
              <el-tag v-if="scop.row.goodsstatus == 1">未入库</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="goodsspecifications" label="规格型号" width="120" />

          <el-table-column prop="goodsUnitName" label="货品单位" width="100" />
          <el-table-column prop="goodstyoeName" label="货品类型" width="100" />
          <el-table-column prop="vendorName" label="供应商" width="150" />
          <el-table-column prop="storageprice" label="供货价格" width="100" />
          <el-table-column prop="retrievalprice" label="出货参考价" width="120" />
          <el-table-column prop="inventory" label="供货数量" width="120" />
          <el-table-column prop="shelflife" label="保质期(月)" width="120" />
          <el-table-column prop="goodsbarcodes" label="条码" width="150" />
          <el-table-column prop="createtime" label="供货时间" width="160">
            <template v-slot="scop">
              <span>
                {{
                  moment(scop.row.createtime).format("yyyy-MM-DD, h:mm:ss")
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productionTime" label="货品生产时间" width="160">
            <template v-slot="scop">
              <span>
                {{
                  moment(scop.row.productionTime).format("yyyy-MM-DD, h:mm:ss")
                }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <br />
      <el-button @click="CheckRelationdialogFormVisible = false">选好了</el-button>
      <el-button @click="CheckRelationdialogFormVisible = false">取消</el-button>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import moment from "moment";
import { onMounted, ref, watch } from "vue";
import { reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import service from "@/utils/request";

const tableData = ref([]);
const RelationTableData = ref([]);
onMounted(() => {
  GetInWareHouseList();
  GetSelectWareHouse();
  GetRelationGoods()
});
const page = reactive({
  Inwarehousetype: 0,
  WarehouseId: "",
  LocationNoId: "",
  Inwarehousedate1: "",
  Inwarehousedate2: "",
  Status: 0,
  totalPage: 0,
  totalData: 0,
  pageIndex: 1,
  pageSize: 10,
});
const GetInWareHouseList = () => {
  service
    .get("/api/app/ware-house-management", {
      params: {
        Inwarehousetype: page.Inwarehousetype,
        WarehouseId: page.WarehouseId,
        LocationNoId: page.LocationNoId,
        Inwarehousedate1: page.Inwarehousedate1,
        Inwarehousedate2: page.Inwarehousedate2,
        Status: page.Status,
        pageIndex: page.pageIndex,
        pageSize: page.pageSize
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        tableData.value = res.data.pageDatas;
        page.totalPage = res.data.totalPage;
        page.totalData = res.data.totalData;
      }
    });
};
watch(page, () => {
  GetInWareHouseList();
});


const wareHouseOptions = ref([
  {
    warename: "",
    warehouseNo: "",
  },
]);
const GetSelectWareHouse = () => {
  service
    .get(
      "/api/app/ware-house-management/select-ware-house"
    )
    .then((res) => {
      if (res.data.code == 200) {
        wareHouseOptions.value = res.data.resultData;
      }
    });
};


const locationOptions = ref([
  {
    locationName: "",
    locationNo: "",
  },
]);
const GetSelectLocation = (WarehouseId: any) => {
  service
    .get(
      "/api/app/ware-house-management/select-location/" +
      WarehouseId
    )
    .then((res) => {
      if (res.data.code == 200) {
        locationOptions.value = res.data.resultData;
      }
    });
};


const LianDongSelect = (id: any) => {
  GetSelectLocation(id);
};
const ReSet = () => {
  (page.Inwarehousedate1 = ""),
    (page.Inwarehousedate2 = ""),
    (page.Inwarehousetype = 0),
    (page.LocationNoId = ""),
    (page.Status = 0),
    (page.WarehouseId = "");
};

//#region 新增入库
const CreatedialogFormVisible = ref(false);

const ruleFormRef = ref<FormInstance>();
const CreateruleForm = reactive({
  inwarehousetype: 0,
  warehouseId: "",
  locationNo: "",
  relationordernum: "",
  suppilier: "",
  contacts: "",
  contactinfor: "",
  operator: "",
  desc: "",
});

const rules = reactive<FormRules>({
  inwarehousetype: [
    {
      required: true,
      message: "请选择入库类型",
      trigger: "change",
    },
  ],
  warehouseId: [
    {
      required: true,
      message: "请选择所属仓库",
      trigger: "change",
    },
  ],
  locationId: [
    {
      required: true,
      message: "请选择所属库位",
      trigger: "change",
    },
  ],
  relationordernum: [
    {
      required: true,
      message: "请选择关联进货单",
      trigger: "blur",
    },
  ],
  suppilier: [
    {
      required: true,
      message: "请输入供应商",
      trigger: "blur",
    },
  ],

  contacts: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 2, max: 5, message: "长度2-5位！", trigger: "blur" },
  ],

  contactinfor: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
  ],
  operator: [
    {
      required: true,
      message: "请输入经办人",
      trigger: "blur",
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      service
        .post(
          "/api/app/ware-house-management",
          CreateruleForm
        )
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.message);
            CreatedialogFormVisible.value = false
            CreateruleForm.inwarehousetype = 0
            CreateruleForm.warehouseId = ""
            CreateruleForm.locationNo = ""
            CreateruleForm.relationordernum = ""
            CreateruleForm.suppilier = ""
            CreateruleForm.contacts = ""
            CreateruleForm.contactinfor = ""
            CreateruleForm.operator = ""
            CreateruleForm.desc = ""
            GetInWareHouseList()
            GetRelationGoods()
          } else {
            ElMessage.error(res.data.message);
          }
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const CheckRelationdialogFormVisible = ref(false);

const GetRelationGoods = () => {
  service.get("/api/app/goods/goods-list"
    , {
      params: {
        status: 1,
      }
    }
  )
    .then((res) => {
      RelationTableData.value = res.data.pageDatas;
    });
};





//#endregion

//#region 审批入库
const AuditdialogFormVisible = ref(false);
var appId = "";
const toAudit = (id: any) => {
  AuditdialogFormVisible.value = true
  appId = id
}

const AuditRuleForm = reactive({
  radioInfo: 0,
  desc: ""
})

const CancleAudit = () => {
  AuditdialogFormVisible.value = false
  AuditRuleForm.desc = ""
  AuditRuleForm.radioInfo = 0
  isSubmitting.value = false
}

const isSubmitting = ref(false)
const AuditPostForm = reactive({
  InWareHouseAppId: "",
  AuditUser: localStorage.getItem("userName"),
  radioInfo: 0
})
const ContinueAudit = () => {

  if (AuditPostForm.radioInfo == 0) {
    ElMessage.error("请选择您的意见！");
    isSubmitting.value = false
    return
  }
  isSubmitting.value = true
  AuditPostForm.InWareHouseAppId = appId
  service.post("/api/app/ware-house-management/audit", AuditPostForm).then(res => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.message);
      isSubmitting.value = false
      CancleAudit()
      GetInWareHouseList()
    }
    else {
      ElMessage.error(res.data.message);
    }
  });
}


//#endregion

</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
